<template>
  <div class="page-content">
    <div class="header" style="margin-bottom: 1.5rem">
      <h3>支付配置</h3>
    </div>
    <div style="width: 600px">
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="支付渠道">
          <el-radio-group v-model="type">
            <el-radio :value="1">微信支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信支付接口">
          <el-radio-group v-model="type">
            <el-radio :value="1">V3版本</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商户类型">
          <el-radio-group v-model="type">
            <el-radio :value="1">普通商户</el-radio>
            <el-radio :value="2" :disabled="true">微信服务商支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商户号" prop="mchId">
          <el-input v-model="form.mchId" placeholder="请输入商户号" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="证书序列号" prop="serialNo">
          <el-input v-model="form.serialNo" placeholder="请输入证书序列号" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="ApiV3密钥" prop="apiV3Key">
          <el-input v-model="form.apiV3Key" placeholder="请输入ApiV3密钥" :disabled="!isEdit">
            <template #append>
              <el-button @click="getV3KeyData('apiV3Key')">自动生成(32位)</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="ApiV2密钥">
          <el-input v-model="form.apiV2Key" placeholder="请输入ApiV2密钥" :disabled="!isEdit">
            <template #append>
              <el-button @click="getV3KeyData('apiV2Key')">自动生成(32位)</el-button>
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="商户Key证书" prop="privateKey">
          <el-input v-model="form.privateKey" placeholder="请输入商户Key证书" type="textarea" :rows="5" :disabled="!isEdit" />
        </el-form-item> -->
        <el-form-item label="商户公钥Cert证书" prop="publicKey">
          <el-input
            v-model="form.publicKey"
            type="textarea"
            placeholder="请输入商户公钥Cert证书(apiclient_cert.pem)"
            :rows="7"
            :disabled="!isEdit"
          />
        </el-form-item>
        <!-- <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="请输入备注" :disabled="!isEdit" />
        </el-form-item> -->
        <el-form-item label="商户私钥Key证书" prop="privateKey">
          <el-input
            v-model="form.privateKey"
            type="textarea"
            placeholder="请输入商户私钥Key证书(apiclient_key.pem)"
            :rows="7"
            :disabled="!isEdit"
          />
        </el-form-item>
        <!--      <el-form-item label="商户cert证书" prop="certContent">-->
        <!--        <el-input v-model="form.certContent" :disabled="!isEdit" />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="商户key证书" prop="keyContent">-->
        <!--        <el-input v-model="form.keyContent" :disabled="!isEdit" />-->
        <!--      </el-form-item>-->
        <el-form-item>
          <el-button type="primary" style="width: 90px" @click="edit" v-if="!isEdit">
            编辑
          </el-button>
          <el-button
            type="primary"
            style="width: 90px"
            v-else
            :loading="saveLoading"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { getPayConfig, updatePayConfig, getV3Key } from '@/api/ApiList'

  const type = ref(1)

  const isEdit = ref(false)
  const saveLoading = ref(false)

  interface RuleForm {
    mchId: string
    serialNo: string
    apiV3Key: string
    apiV2Key: string
    // certContent: string
    // keyContent: string
    remark: string
    privateKey: string
    publicKey: string
  }

  const ruleFormRef = ref<FormInstance>()
  const form = reactive<RuleForm>({
    mchId: '',
    serialNo: '',
    apiV3Key: '',
    apiV2Key: '',
    remark: '',
    publicKey: '',
    // certContent: '',
    // keyContent: '',
    privateKey: ''
  })

  const rules = reactive<FormRules<RuleForm>>({
    mchId: [{ required: true, message: '请输入', trigger: 'blur' }],
    serialNo: [{ required: true, message: '请输入', trigger: 'blur' }],
    apiV3Key: [{ required: true, message: '请输入', trigger: 'blur' }],
    privateKey: [{ required: true, message: '请输入', trigger: 'blur' }],
    publicKey: [{ required: true, message: '请输入', trigger: 'blur' }]
    // certContent: [{ required: true, message: '请输入', trigger: 'blur' }],
    // keyContent: [{ required: true, message: '请输入', trigger: 'blur' }]
  })

  function edit() {
    isEdit.value = !isEdit.value
  }

  async function getData() {
    const res = await getPayConfig({})
    if (res.code === '00000' && res.data) {
      form.mchId = res.data.mchId
      form.serialNo = res.data.serialNo
      // form.certContent = res.data.certContent
      form.apiV3Key = res.data.apiV3Key
      form.apiV2Key = res.data.apiV2Key
      // form.certContent = res.data.certContent
      form.privateKey = res.data.privateKey
      form.publicKey = res.data.publicKey
      form.remark = res.data.remark
    }
  }

  async function handleUpdateConfig() {
    try {
      saveLoading.value = true
      const obj: Partial<RuleForm> = {}
      for (const key in form) {
        const value = form[key as keyof RuleForm]
        if (value !== '') {
          obj[key as keyof RuleForm] = value
        }
      }
      const res = await updatePayConfig(obj)
      if (res.code === '00000') {
        isEdit.value = false
        ElMessage.success('编辑成功')
        await getData()
      } else {
        ElMessage.error(res.msg || '失败')
      }
    } catch (e) {
    } finally {
      saveLoading.value = false
    }
  }

  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
      if (valid) {
        handleUpdateConfig()
      } else {
      }
    })
  }

  async function getV3KeyData(key: keyof RuleForm) {
    const res = await getV3Key(32)
    if (res.code === '00000') {
      ElMessage.success('获取成功')
      form[key] = res.data
    }
  }

  onMounted(() => {
    getData()
  })
</script>

<style scoped lang="scss"></style>
